<template>
  <page-header title="粉丝社区" background="#FFFAF4" color="black" :needBack="false"></page-header>
  <view class="header">
    <view class="big-title" style="padding:20rpx 64rpx">参与话题
      <image class="img" style="top:22rpx;left:76rpx" src="../../static/img/cloud.png"></image>
    </view>
    <scroll-view class="scroll-view_H" scroll-x="true">
      <view class="scroll-view-item_H" v-for="(item, index) in section" :key="index">
        <image v-if="index % 2 == 0" class="background" :src="addDomain('/static/aaa.png')"></image>
        <image v-else class="background" :src="addDomain('/static/bbb.png')"></image>
        <view class="body" @tap="gotoPost(item.sectionId, item.name)">
          <view class="top">
            <view class="title text-overflow">{{ item.name }}</view>
            <view class="right">></view>
          </view>
          <view class="des text-overflow">{{ item.description }}</view>
          <view class="button">
            记录感受
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  <view class="body">
    <view class="hot-tag">
      <view class="big-title">热门话题
        <image class="img" src="../../static/img/cloud.png"></image>
      </view>
      <view class="tag-list">
        <view :class="{ tag: true, active: queryData.sectionId == item.sectionId }" v-for="(item, index) in section"
          :key="index" @tap="getListBySection(item.sectionId, item.name)">
          <!--         <image class="icon" style="width: 60rpx;height: 60rpx;"
            :src="item.icon || addDomain('/static/community-3.png')" mode="aspectFill"></image> -->
          <view class="group text-overflow">
            <view class="title text-overflow">#{{ item.name }}</view>
            <!-- <view class="content text-overflow">{{ item.description }}</view> -->
          </view>
        </view>
      </view>
    </view>
    <block v-for="item in postList" :key="item.postId">
      <view class="post-item">
        <view class="top">
          <image class="avatar" :src="item.pic || '../../static/img/avatar.png'" mode="aspectFill"></image>
          <view class="group">
            <view class="nickName">
              {{ item.userName }}
            </view>
            <view class="postTime">
              {{ String(item.createTime).substring(0, 16) }}
            </view>
          </view>
          <image class="cloud" src="../../static/img/new-cloud.png"></image>
        </view>
        <view class="content">
          <view class="text text-overflow-clamp-2" v-html="item.content" style='font-size: 34rpx;'>
          </view>
          <view class="group">
            <image class="img" v-for="(img, index) in item.files" :src="img.fileUrl" mode="aspectFill" :key="img.fileId"
              @tap="preview(index, item.files)"></image>
          </view>
        </view>
        <view class="button">
          <button open-type="share" class="shareButton">
            <image class="icon" src="../../static/img/share.png"></image>
            分享
          </button>
          <view class="group">
            <image style="width: 36rpx;" class="icon" src="../../static/img/handup.png"
              v-if="!likeArr.includes(item.postId)" @tap="handup(item)"></image>
            <image style="width: 36rpx;" class="icon" src="../../static/img/handup-filled.png" v-else
              @tap="alreadyHandup()"></image>
            {{ item.like }}
          </view>
        </view>
      </view>
    </block>
  </view>
  <empty-img v-if="isEmpty">
    <template #text>
      没有帖子或者帖子未通过审核哦~
    </template>
    <template #button>
      <view @tap="gotoPost(nowSection.sectionId, nowSection.sectionName)">记录感受</view>
    </template>
  </empty-img>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import http from '../../utils/http';
  const postList = ref([])
  const timer = ref(null)
  const view = ref({
    timer: null,
    count: 0
  })
  onShow(() => {
    getSection() //获取头部模块
    getList() //获取帖子列表
    if (uni.getStorageSync('cloudToken')) {
      handleView() //处理浏览加积分
    }
  })
  onHide(() => {
    if (view.value.timer != null) {
      clearInterval(view.value.timer)
      view.value.timer = null
    }
  })
  const current = ref(0) //用于切换轮播图样式大小的
  const changeCurrent = (e) => {
    current.value = e.detail.current
  }
  const gotoPost = (sectionId, sectionName) => {
    if (!uni.getStorageSync('cloudToken')) {
      uni.showModal({
        title: '提示',
        content: '该功能登录后开放哦',
        confirmText: '去登录',
        success: modalRes => {
          if (modalRes.confirm) {
            // 跳转登录页面
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }
        }
      })
      return
    }
    uni.navigateTo({
      url: `/pages/new-post/new-post?sectionId=${sectionId}&sectionName=${sectionName}`
    })
  }
  onShareAppMessage((options) => {
    return {
      title: options.target.dataset.text, //分享的标题
      path: 'pages/activity-community/activity-community', //点击分享链接之后进入的页面路径
    }
  })
  //2.配置分享到朋友圈
  onShareTimeline(() => {
    return {
      title: '山海台秀欢迎你的到来！', //分享的标题
      query: 'pages/index', //点击分享链接之后进入的页面路径
    }
  })
  /**
   * 查询条件
   */
  const Data = ref({})
  const queryData = ref({
    pageSize: 10,
    pageNum: 1,
    columns: "status,sectionId,updateTime",
    orders: "DESC,ASC,DESC",
    title: "",
    sectionId: "",
    userId: "",
    sysType: "0",
  })
  const isEmpty = ref(false)
  /**
   * 获取帖子
   */
  const getList = () => {
    uni.showLoading()
    http.request({
      url: '/mall4cloud_point/ua/post/page',
      method: 'GET',
      data: queryData.value
    }).then((res) => {
      isEmpty.value = false
      if (queryData.value.pageNum === 1) {
        Data.value = res
      } else {
        let list = Data.value.list
        list.push(...res.list)
        Data.value.list = list
      }
      if (Data.value.pages == 0) {
        isEmpty.value = true
      }
      if (queryData.value.pageNum === Data.value.pages) {
        isLoadAll.value = true
      }
      handleLike(res.list)
      postList.value = Data.value.list
      uni.hideLoading()
    })
  }
  /**
   * 获取头部模块节
   */
  const section = ref([])
  const getSection = () => {
    uni.showLoading()
    http.request({
      url: '/mall4cloud_point/ua/section?type=1',
      method: 'GET'
    }).then((res) => {
      section.value = res
      uni.hideLoading()
    }).catch(err => {
      uni.hideLoading()
    })
  }
  /**
   * 处理点击头部模块节
   */
  const nowSection = ref({
    sectionId: '',
    sectionName: ''
  })
  const getListBySection = (sectionId, sectionName) => {
    queryData.value.pageNum = 1
    queryData.value.sectionId = sectionId ? sectionId != queryData.value.sectionId ? sectionId : '' : ''
    nowSection.value.sectionId = sectionId
    nowSection.value.sectionName = sectionName
    getList()
  }
  /**
   * 页面上拉触底事件的处理函数
   */
  const isLoadAll = ref(false)
  onReachBottom(() => {
    if (queryData.value.pageNum < Data.value.pages) {
      queryData.value.pageNum = queryData.value.pageNum + 1
      getList()
    } else {
      isLoadAll.value = true
    }
  })
  const likeArr = ref([])
  /**
   * 处理点赞
   */
  const handleLike = (list) => {
    if (!uni.getStorageSync('cloudToken')) return
    for (let i = 0; i < list.length; i++) {
      http.request({
        url: '/mall4cloud_point/u/post/isLike?postId=' + list[i].postId,
        method: 'GET',
		dontShowLogin: true,
      }).then((res) => {
        if (res) likeArr.value.push(list[i].postId)
      })
    }
  }
  /**
   * 点赞该文章
   */
  const handup = (item) => {
    http.request({
      url: '/mall4cloud_point/u/post/like?postId=' + item.postId,
      method: 'GET',
    }).then((res) => {
      uni.showToast({
        title: "点赞成功",
        icon: 'none',
        duration: 1000
      })
      item.like += 1
      likeArr.value.push(item.postId)
    })
  }
  /**
   * 已经点赞后的操作
   */
  const alreadyHandup = () => {
    uni.showToast({
      title: "不能重复点赞哦",
      icon: 'none',
      duration: 1000
    })
  }
  /**
   * 预览图片
   */
  const preview = (index, arr) => {
    let imgArr = arr.map(item => item.fileUrl)
    uni.previewImage({
      urls: imgArr,
      current: index
    })
  }
  // 添加图片域名
  const addDomain = (path) => {
      const resourcesUrl = import.meta.env.VITE_APP_FILE_URL
    if (!path || /^http?:\/\//.test(path)) {
      return path
    } else {
      return resourcesUrl + path
    }
  }
  const handleView = () => {
    view.value.timer = setInterval(viewPost, 10000)
  }
  const viewPost = () => {
    if (uni.getStorageSync('cloudToken')) {
      http.request({
        url: '/mall4cloud_point/u/point/viewPost',
        method: 'GET',
      })
      view.value.count++;
      if (view.value.count >= 5) {
        clearInterval(view.value.timer)
        view.value.timer = null
      }
    }
  }
</script>

<style>
  page {
    background-color: #FFFAF4;
  }
</style>
<style lang="scss" scoped>
  @use "activity-community";
</style>
